<template>
    <view>
        <!-- <back></back> -->
        <!-- <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
        <view class="all">
            <view>
                <view
                    class="top-messge"
                    :style="{ 'background-image': 'url(' + BaseUrl + '/static/yCreate/bg.png)' }"
                >
                    <view class="head u-flex">
                        <image
                            :src="avatar ? cdnurl + avatar : '@/static/logo.png'"
                            mode="aspectFill"
                        ></image>
                        <text>{{ shopname }}</text>
                    </view>
                    <view class="u-flex">
                        <view class="left">
                            <view class="title">订单数</view>
                            <view class="num">{{ count }}<text>单</text></view>
                        </view>
                        <view>
                            <view class="title">总收益（元）</view>
                            <view class="num"><text>￥</text>{{ money }}</view>
                        </view>
                    </view>
                    <view
                        class="withdraw u-flex-center"
                        @click="$func.jump('/wNew/pages/withdrawal')"
                        >去提现
                        <image :src="imageURL + 'yCreate/right3.png'" mode="widthFix"></image>
                    </view>
                </view>
                <view class="detail u-flex-center u-row-between">
                    <text>收益明细</text>
                    <view class="u-flex-center" @click="show = true">
                        <view>筛选</view>
                        <image :src="imageURL + 'yCreate/bot.png'" mode="widthFix"></image>
                    </view>
                </view>
            </view>
            <view class="card u-border-top" v-for="(item, index) in list" :key="index">
                <view class="top u-flex-center u-row-between">
                    <view>单号：{{ item.order_no }}</view>
                    <view class="state">{{ item.createtime_text }}</view>
                </view>
                <view
                    class="u-flex-center u-row-left"
                    v-for="(items, indexs) in item.goods"
                    :key="indexs"
                >
                    <image :src="items.image" mode="aspectFill" class="head-img"></image>
                    <view class="cont">
                        <view class="name u-line-2">{{ items.title }}</view>
                        <view class="u-flex u-row-between u-m-t-30">
                            <view class="price"><text>￥</text>{{ item.price }}</view>
                            <view class="number">扣除佣金：￥{{ item.yj_price }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- </mescroll-body> -->
        <u-calendar
            v-model="show"
            mode="range"
            @change="change"
            active-bg-color="#3fbe89"
            range-bg-color="rgba(146, 253, 200, 0.3)"
            range-color="#3fbe89"
        ></u-calendar>
    </view>
</template>

<script>
import config from "../../common/config/config.js";
import { imageURL } from "@/utils/config";
import { BaseUrl } from "../../utils/req";
// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    // mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            BaseUrl,
            flowList: [],
            show: false,
            type: "-1",
            avatar: "",
            shopname: "",
            count: "",
            money: "",
            list: [],
            imageURL: imageURL,
            cdnurl: config.cdnurl,
        };
    },
    onReady() {
        this.$u.post("/api/shop/shop_details", {}).then((res) => {
            if (res.code == 1) {
                this.avatar = res.data.avatar;
                this.shopname = res.data.shopname;
            }
        });
        this.getList();
    },
    methods: {
        confirm(id) {
            this.$u
                .post("scholar/order_complete", {
                    id: id,
                })
                .then((res) => {
                    this.$u.toast(res.msg);
                    if (res.code == 1) {
                        this.mescroll.resetUpScroll();
                    }
                });
        },
        upCallback(page) {
            this.mescroll.optUp.textNoMore = "-已经到底啦-";
            this.$u
                .post("scholar/order_list", {
                    page: page.num,
                    limit: page.size,
                    id: this.type,
                })
                .then((res) => {
                    this.mescroll.endBySize(res.data.data.length, res.data.total);
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        change(index) {
            console.log(index);
            this.current = index.startDate + " " + index.endDate;
            this.getList();
            // this.mescroll.resetUpScroll();
        },
        getList() {
            this.$u
                .post("/api/shop/get_income_list", {
                    search_time: this.current,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.count = res.data.count;
                        this.money = res.data.money;
                        this.list = res.data.list.data;
                    }
                });
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: #fff;
}
/deep/.u-btn--primary {
    background-color: #3fbe89;
    border: none;
}
.all {
    padding: 30rpx;
    .top-messge {
        position: relative;
        padding: 30rpx 37rpx;
        width: 100%;
        height: 307rpx;
        // background: url('@/static/yCreate/bg.png') no-repeat;
        background-size: 100% 100%;
        .head {
            margin-bottom: 50rpx;
            font-size: 28rpx;
            color: #ffffff;
            image {
                width: 60rpx;
                height: 60rpx;
                margin-right: 10rpx;
                flex-shrink: 0;
                border-radius: 50rpx;
            }
        }
        .left {
            margin-right: 243rpx;
            margin-left: 30rpx;
            text {
                font-size: 24rpx !important;
            }
        }
        .title {
            font-size: 24rpx;
            color: #ffffff;
        }
        .num {
            flex-shrink: 0;
            margin-top: 10rpx;
            font-size: 48rpx;
            font-weight: bold;
            color: #ffffff;
            text {
                font-size: 28rpx;
                font-weight: 500;
            }
        }
        .withdraw {
            position: absolute;
            top: 32rpx;
            right: 0;
            width: 180rpx;
            height: 70rpx;
            background: #ffffff;
            border-radius: 35rpx 0rpx 0rpx 35rpx;
            font-size: 28rpx;
            color: #606dce;
            image {
                width: 12rpx;
                height: 10rpx;
                margin-left: 10rpx;
            }
        }
    }
    .detail {
        margin: 30rpx 0;
        font-size: 24rpx;
        text {
            font-size: 32rpx;
            font-weight: bold;
            color: #222222;
        }
        image {
            width: 20rpx;
            height: auto;
            margin-left: 10rpx;
        }
    }
    .card {
        width: 100%;
        padding: 30rpx 0;
        .top {
            padding-bottom: 30rpx;
            font-size: 24rpx;
            .state {
                color: #888;
            }
        }
        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }
        .cont {
            width: 100%;
            .name {
                margin-bottom: 22rpx;
                font-size: 28rpx;
            }
            .content {
                font-size: 24rpx;
                color: #888888;
            }
            .bot {
                margin-top: 40rpx;
                font-size: 26rpx;
                color: #888;
                .price {
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #da0000;
                }
                text {
                    font-size: 32rpx;
                }
            }
            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;
                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }
            .number {
                font-size: 28rpx;
                color: #ef5205;
            }
        }
    }
}
</style>
